<template>
  <div class="swiper-container">
    <img v-if="list.length === 1" :src="list[0].imgPath" @click="postMessage(list[0].openLink)">
    <swiper v-if="list.length > 1" :options="swiperOption">
      <swiper-slide v-for="(item, index) in list" :key="index"><img :src="item.imgPath" @click="postMessage(item.openLink)"></swiper-slide>
    </swiper>
  </div>
</template>

<script>
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  export default {
    name: 'index',

    props: {
      list: {
        type: Array,
        default: []
      }
    },

    data () {
      return {
        swiperOption: {
          loop: true,
          autoplay: {
            delay: 3000,
            disableOnInteraction: false
          }
        }
      }
    },

    components: {
      swiper,
      swiperSlide
    },

    methods: {
      postMessage (url) {
        if (url) {
          postMessage({
            'androidUrl': url,
            'iosUrl': url,
            'wxappUrl': url
          });
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .swiper-container {
    width: auto;
    height: 100%;
  }
  img {
    width: 100%;
    height: 100%;
  }
</style>
